<template>
	<view class="examine-content">
		<uni-nav-bar fixed class="unibarS">
			<block slot="left">
				<text>审批</text>
			</block>
			<block slot="right">
				<uni-icons @click="goSearch" type="search" size="26"></uni-icons>
			</block>
		</uni-nav-bar>
		<!-- 操作按钮 -->
		<view class="operation-box">
			<u-row customStyle="margin-top: 10px">
				<u-col span="3">
					<view class="col-box" @click="orderApproval()">
						<u--image :src="'/static/img/examine/operation_1.png'" width="96rpx" height="96rpx"></u--image>
						<text class="col-text">订单审批</text>
					</view>
				</u-col>
				<u-col span="3">
					<view class="col-box" @click="paymentApproval()">
						<u--image :src="'/static/img/examine/operation_2.png'" width="96rpx" height="96rpx"></u--image>
						<text class="col-text">回款审批</text>
					</view>
				</u-col>
				<u-col span="3">
					<view class="col-box" @click="refundApproval()">
						<u--image :src="'/static/img/examine/operation_3.png'" width="96rpx" height="96rpx"></u--image>
						<text class="col-text">退款审批</text>
					</view>
				</u-col>
			</u-row>
		</view>
		<!-- 待我审批 -->
		<view class="approval-box">
			<view class="approval-title">
				<text>待我审批</text>
				<!-- <u-icon name="arrow-right" color="#000000" size="18"></u-icon> -->
			</view>
			<view v-if="list.length" class="schedule-day-list">
				<view class="schedule-day-list-item" v-for="(item, index) in list" :key="index">
					<!-- 放置左侧的颜色线 -->
					<view class="schedule-day-list-item-left"></view>
					<!-- 内容 -->
					<view class="schedule-day-list-item-content">
						<!-- 左侧 -->
						<view class="item-content-box">
							<view class="item-content-box-time">订单编号：{{ item.orderNumber }}</view>
							<view class="item-content-box-text">提交时间：{{ item.createTime }}</view>
						</view>
						<!-- 状态 -->
						<view class="item-state-box">{{ item.process.taskName }}</view>
					</view>
				</view>
				<uni-load-more :status="status" />
			</view>
			<empty-view v-else/>
		</view>
	</view>
</template>
<script>
import { convertToDict } from '@/common/utils'
export default {
	data() {
		return {
			title: 'Hello',
			params: {
                auditStatus: 1002,
				keyword: '',
				pageNum: 1,
				pageSize: 20
			},
			total: 0,
			status: 'loading',
			refresh: false,
			list: [],
		}
	},
	onLoad() {
        this.bus_examine_status = convertToDict(JSON.parse(uni.getStorageSync('bus_examine_status')))
		this.getData()
	},
	onReachBottom() {
		console.log('上拉加载onReachBottom')
		if (this.status == 'noMore' || this.status == 'loading') return
		this.params.pageNum = this.params.pageNum + 1
		this.status = 'loading'
		this.getData()
	},
	methods: {
		getData() {
			this.$http.get('/app/audit/orderList', this.params).then(res => {
				if (res.code == 200) {
                    if(res.data.records) {
                        this.list = [...this.list, ...res.data.records]
                        this.total = res.data.total
                        if (this.total > this.list.length) {
                            this.status = 'more'
                        } else {
                            this.status = 'noMore'
                        }
                    } else {
                        this.total = 0
                        this.status = 'noMore'
                    }

					if (this.refresh) {
						uni.stopPullDownRefresh()
					}
				} else {
					uni.$u.toast(res.msg)
				}
			})
		},
		// 订单审批
		orderApproval() {
			uni.navigateTo({
                url: '/pages/examine/orderApproval'
            });
		},	
		// 回款审批
		paymentApproval() {
			uni.navigateTo({
                url: '/pages/examine/paymentApproval'
            });
		},	
		// 退款审批
		refundApproval() {
			uni.navigateTo({
                url: '/pages/examine/refundApproval'
            });
		},
		goSearch() {
			uni.navigateTo({
                url: '/pages/other/search'
            });
		},		
	}
}
</script>

<style lang="scss" scoped>
.unibarS {
	/deep/.uni-navbar__header {
		padding: 0 32rpx;
	}

	/deep/.uni-navbar__content {
		border-bottom: none !important;
		box-shadow: 0px 0px 4px rgba(136, 136, 136, 0.12);
	}

	/deep/.uni-navbar__header-btns-left {
		font-size: 36rpx;
	}
}

.examine-content {
	padding: 0 32rpx;

	.operation-box {
		.col-box {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: fit-content;

			.col-text {
				margin-top: 10rpx;
				font-size: 12px;
				font-weight: 400;
				color: rgba(12, 16, 25, 1);
			}

			;
		}
	}

	.approval-box {
		margin-top: 60rpx;

		.approval-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			// margin-bottom: 40rpx;

			>text {
				font-size: 32rpx;
				font-weight: 400;
				color: rgba(12, 16, 25, 1);
			}
		}

		.schedule-day-list-item {
			display: flex;
			align-items: center;
			margin-top: 32rpx;
			border-radius: 20px;
			background: rgba(255, 255, 255, 1);
			padding: 32rpx;
			border-radius: 20rpx;
			box-shadow: 0px 0px 6px  rgba(202, 197, 197, 0.5);

			.schedule-day-list-item-left {
				width: 8rpx;
				height: 68rpx;
				border-radius: 40rpx;
				background: #4DACB1;
				margin-right: 16rpx;
			}

			.schedule-day-list-item-content {
				flex: 1;
				display: flex;
				align-items: center;

				.item-content-box {
					width: 0;
					flex: 1;

					.item-content-box-time {
						font-size: 28rpx;
						font-weight: 500;
						color: rgba(12, 16, 25, 1);
					}

					.item-content-box-text {
						font-size: 28rpx;
						color: rgba(103, 117, 133, 1);
						margin-top: 8rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}

				.item-state-box {
					width: 100rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(103, 117, 133, 1);
					margin-left: 20rpx;
					// 超出隐藏
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
		}
	}

}
</style>
